<template>
	<view class="search-page">
		<!-- 搜索头部 -->
		<view class="search-header">
			<view class="search-input-wrap">
				<u-icon name="search" size="32" color="#999" />
				<input 
					class="search-input" 
					v-model="searchKeyword"
					placeholder="请输入项目名称" 
					confirm-type="search"
					@confirm="handleSearch"
					focus
				/>
				<u-icon v-if="searchKeyword" name="close" size="24" color="#999" @click="clearSearch" />
			</view>
			<text class="cancel-btn" @click="goBack">取消</text>
		</view>

		<!-- 搜索结果列表 -->
		<view class="search-result" v-if="searchKeyword">
			<view class="project-list">
				<view class="project-card" v-for="item in projectList" :key="item.id" @click="toProjectDetail(item.id)">
					<image :src="item.image" class="project-img" mode="widthFix" />
					<view class="project-info">
						<view class="project-name">{{ item.name }}</view>
						<view class="project-desc">{{ item.description }}</view>
						<view class="project-price-row">
							<text class="project-price">￥{{ item.price }}<span class="project-unit">/{{ item.unit }}</span></text>
						</view>
					</view>
				</view>
			</view>
			<view class="empty-result" v-if="projectList.length === 0">
				<u-empty mode="search" text="暂无搜索结果" />
			</view>
		</view>

		<!-- 搜索历史 -->
		<view class="search-history" v-else>
			<view class="history-header">
				<text class="history-title">搜索历史</text>
				<u-icon name="trash" size="32" color="#999" @click="clearHistory" />
			</view>
			<view class="history-list">
				<view class="history-item" v-for="(item, index) in searchHistory" :key="index" @click="useHistory(item)">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				projectList: [],
				searchHistory: [],
				statusBarHeight: 0,
				navBarHeight: 0
			}
		},
		onLoad() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			// #ifdef MP-WEIXIN
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2
			// #endif
			// #ifdef H5
			this.navBarHeight = 44
			// #endif

			// 获取搜索历史
			const history = uni.getStorageSync('searchHistory') || []
			this.searchHistory = history
		},
		methods: {
			handleSearch() {
				if (!this.searchKeyword.trim()) return
				
				// 保存搜索历史
				if (!this.searchHistory.includes(this.searchKeyword)) {
					this.searchHistory.unshift(this.searchKeyword)
					if (this.searchHistory.length > 10) {
						this.searchHistory.pop()
					}
					uni.setStorageSync('searchHistory', this.searchHistory)
				}

				// 搜索项目
				this.$http.getProjectList({
					keyword: this.searchKeyword,
					sort: 'desc'
				}).then(res => {
					this.projectList = res.map(item => ({
						...item,
						image: item.image,
						sale_count: item.sale_count || item.orderDetails.length
					})).filter(item => item.name.includes(this.searchKeyword) || item.description.includes(this.searchKeyword))
				})
			},
			clearSearch() {
				this.searchKeyword = ''
				this.projectList = []
			},
			clearHistory() {
				uni.showModal({
					title: '提示',
					content: '确定要清空搜索历史吗？',
					success: (res) => {
						if (res.confirm) {
							this.searchHistory = []
							uni.removeStorageSync('searchHistory')
						}
					}
				})
			},
			useHistory(keyword) {
				this.searchKeyword = keyword
				this.handleSearch()
			},
			goBack() {
				uni.navigateBack()
			},
			toProjectDetail(id) {
				uni.navigateTo({
					url: '/pages/project/project?projectId=' + id
				})
			}
		}
	}
</script>

<style lang="less">
pages {
  height: 100%;
  overflow: hidden;
  background: rgba(246, 246, 246, 1);
}
.search-page {
  height: 100%;
  overflow: auto;
}
.search-header {
	display: flex;
	align-items: center;
	padding: 12rpx 24rpx 24rpx 24rpx;
	background: #fff;
}
.search-input-wrap {
	flex: 1;
	background: #f5f5f5;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	height: 72rpx;
	margin-right: 24rpx;
}
.search-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 28rpx;
	margin: 0 16rpx;
}
.cancel-btn {
	font-size: 28rpx;
	color: #666;
}
.search-result {
	padding: 24rpx;
}
.project-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
}
.project-card {
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx #f0f0f0;
}
.project-img {
	width: 100%;
	height: 240rpx;
	text-align: center;
  border-top-left-radius: 12rpx;
  border-top-right-radius: 12rpx;
  overflow: hidden;
}
.project-info {
	padding: 12rpx;
}
.project-name {
	font-size: 24rpx;
	font-weight: bold;
	color: #222;
	margin-bottom: 4rpx;
}
.project-desc {
	font-size: 20rpx;
	color: #888;
	margin-bottom: 8rpx;
}
.project-price-row {
	display: flex;
	align-items: baseline;
}
.project-price {
	font-size: 26rpx;
	color: #ff6600;
	font-weight: bold;
}
.project-unit {
	font-size: 18rpx;
	color: #ff6600;
	margin-left: 2rpx;
}
.search-history {
	padding: 24rpx;
	margin-top: calc(72rpx + var(--status-bar-height) + var(--nav-bar-height));
}
.history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
}
.history-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}
.history-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}
.history-item {
	padding: 12rpx 24rpx;
	background: #f5f5f5;
	border-radius: 32rpx;
	font-size: 24rpx;
	color: #666;
}
.empty-result {
	padding: 120rpx 0;
}
</style>
